<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@page import="share.Constant"%>
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>Customer Transaction History</title>
	
		<link rel="stylesheet" href="<c:url value="css/bootstrap.min.css" />"
			type="text/css" />
		<link rel="stylesheet"
			href="<c:url value="font-awesome-4.2.0/css/font-awesome.min.css" />"
			type="text/css" />
		<link rel="stylesheet"
			href="<c:url value="css/jquery.dataTables.css" />" type="text/css" />
		<link rel="stylesheet"
			href="<c:url value="css/animate.css" />" type="text/css" />
		<link rel="stylesheet"
			href="<c:url value="css/style.css" />" type="text/css" />
		
		<!-- SCRIPT -->
		<script src="<c:url value="js/jquery/jquery.min.js" />"
			type="text/javascript"></script>
		<script src="<c:url value="js/jquery/jquery-ui.js" />"
			type="text/javascript"></script>
		<script src="<c:url value="js/jquery/jquery.dataTables.js" />"
			type="text/javascript"></script>
		<script>
			$(document).ready(function() {
				$("#mytable").dataTable();
				$("#table2").dataTable();
			});
		</script>
	</head>
	<body class="container-fluid">
		<c:if test="${message != null}">
	   	 	<div class="popupMessage">
	   	 		<span class="fa fa-check"></span>
			  	<h6 class="error">${message.message}</h6>
			  	<button class="closeButton">X</button>
	   	 	</div>
		 </c:if>
		<header class="row">
			<div id="logocontainer" class="col-md-2">
				<img src="images/logo.png"/>		
			</div>
			<div class="col-md-10 status-container">
				<h1 class="welcomeMessage">Welcome user</h1>
			</div>
			<div class="bg-trees"></div>
		</header>
		<section id="maintab" class="row">
			<div id="tabheader" class="col-md-2">
				<div class="tabheaderitem"><a href="customerInfo"><span class="fa fa-info"></span> Account Info</a></div>
				<div class="tabheaderitem"><a href="changePassword"><span class="fa fa-cogs"></span> Change password</a></div>
				<div class="tabheaderitem"><a href="moneyTransfer"><span class="fa fa-random"></span> Money transferring</a></div>
				<div class="tabheaderitem active"><a href="history"><span class="fa fa-history"></span> Transaction history</a></div>
				<div class="customerInfo">
					<span class="fa fa-user"></span> ${customer.firstName} ${customer.lastName}<br>
					<span class="fa fa-money"></span> <fmt:formatNumber type="number" maxFractionDigits="3" value="${customer.amount}" /> VND
				</div>
			</div>
			<div id="bodycontainer" class="col-md-9 container-fluid">
				<h3 class="headerMessage"><span class="fa fa-arrow-right fa-border"></span> From your account to other accounts</h3>
				<table id="mytable" class="table table-striped">
					<thead>
						<tr>
							<th>Date And time</th>
							<th>To Account</th>
							<th>Amount (VND)</th>
							<th>Status</th>
							<th>Reason</th>
						</tr>
					</thead>
					
					<tbody>						
						<c:forEach var="transaction" items="${transactionList}">
							<tr>
								<td>${transaction.date}</td>
								<td>${transaction.receivedCustomer.firstName} ${transaction.receivedCustomer.lastName}</td>
								<td><fmt:formatNumber type="number" maxFractionDigits="3" value="${transaction.amount}" /></td>
								<td class="${transaction.transactionState.stateDescription}">${transaction.transactionState.stateDescription}</td>
								<td>${transaction.denyReason}</td>
							</tr>
						</c:forEach>
												
					</tbody>											
				</table>
				<hr>
				<h3 class="headerMessage"><span class="fa fa-arrow-left fa-border"></span> From other accounts</h3>
				<table id="table2" class="table table-striped">
					<thead>
						<tr>
							<th>Date And time </th>
							<th>From Account</th>
							<th>Amount (VND)</th>
							<th>Status</th>
							<!-- <th>Reason</th> -->
						</tr>
					</thead>
					
					<tbody>						
						<c:forEach var="transaction" items="${transactionList2}">
							<tr>
								<td>${transaction.date}</td>
								<td>${transaction.sendCustomer.firstName} ${transaction.sendCustomer.lastName}</td>
								<td><fmt:formatNumber type="number" maxFractionDigits="3" value="${transaction.amount}" /></td>
								<td class="${transaction.transactionState.stateDescription}">${transaction.transactionState.stateDescription}</td>
								<%-- <td>${transaction.reason}</td> --%>
							</tr>
						</c:forEach>
					</tbody>
				</table>
			</div>			
			<div class="col-md-1 status">
				<a href="logout"><span class="fa fa-lock"></span></a>
				<a><span class="fa fa-question-circle"></span></a>
				<a><span class="fa fa-download"></span></a>
			</div>
		</section>
		<footer>
			cdc_bank@csc.com
		</footer>
	</body>
</html>